<template>
  <div class="page-play">
    <div
      class="page-position"
      :class="[showChapter ? 'active' : '', showChapter && bigScreen ? 'big_screen' :'']"
      :style="{
        width: showChapter && chapter_obj.isLive == 0 ? width : '1200px',
        margin:'0 auto'
      }"
    >
      <div class="breadcrumb-box">
        <a class="breadcrumb-item" @click="$router.push('/classify')">{{
          this.$t("locale.pc.mycourse.play.t1")
        }}</a>
        <span class="breadcrumb-arrow">
          <van-icon name="arrow" size="16" />
        </span>
        <a
          class="breadcrumb-item"
          @click="$router.push('/classify?id=' + major_obj.id)"
          >{{ major_obj.name }}</a
        >
        <span class="breadcrumb-arrow">
          <van-icon name="arrow" size="16" />
        </span>
        <a class="breadcrumb-item breadcrumb-item-active">{{
          course_obj.courseName
        }}</a>
        <span class="breadcrumb-arrow">
          <van-icon name="arrow" size="16" />
        </span>
      </div>
      <no-ssr>
        <div class="main-box" :class="chapter_obj.isLive == 1 ? 'active' : ''">
          <div class="video-container" v-if="chapter_obj.isLive != 3">
            <div class="chapter-title" v-if="chapter_obj.isLive == 0">
              {{ chapter_obj.chapterName }}
            </div>
            <template
              v-if="
                is_had_course &&
                  !is_hidden_content &&
                  chapter_obj.isLive != 0 &&
                  [2, 3].includes(live_status)
              "
            >
              <div class="live-info">
                <p v-if="live_status == 2 && getChapterCount != -1">
                  距离直播开始还有
                  <van-count-down :time="getChapterCount">
                    <template v-slot="timeData">
                      <span class="block">{{ timeData.days }}</span>
                      <span class="colon">{{
                        $t("locale.mobile.courseDetail.t5")
                      }}</span>
                      <span class="block">{{ timeData.hours }}</span>
                      <span class="colon">{{
                        $t("locale.mobile.courseDetail.t6")
                      }}</span>
                      <span class="block">{{ timeData.minutes }}</span>
                      <span class="colon">{{
                        $t("locale.mobile.courseDetail.t7")
                      }}</span>
                    </template>
                  </van-count-down>
                </p>
                <p v-if="live_status == 3">
                  当前直播已经结束
                </p>
              </div>
            </template>
            <template v-if="!is_hidden_content">
              <no-ssr>
                <videos-player
                  :sources="sources"
                  :timeUpdate="websocketsend"
                  :updateLastStudyTime="updateLastStudyTime"
                  :startTime="video_obj.time"
                  :chapter_obj="chapter_obj"
                  :isJump="kl_md.KLST == 1 && !is_had_course && chapter_obj.isJump == 1"
                  @setSources="setSources"
                  ref="video"
                  v-if="
                    (is_had_course && [0].includes(chapter_obj.isLive)) ||
                      (kl_md.KLST == 1 &&
                        !is_had_course &&
                        chapter_obj.isJump == 1 &&
                        token &&
                        Object.keys(user_info).length > 0) ||
                      (is_had_course &&
                        [1].includes(chapter_obj.isLive) &&
                        [1].includes(live_status))
                  "
                ></videos-player>
              </no-ssr>
              <no-ssr>
                <rtc-live
                  :chapter_obj="chapter_obj"
                  :teacher_obj="teacher_obj"
                  v-if="
                    is_had_course &&
                      [2].includes(chapter_obj.isLive) &&
                      live_status == 1
                  "
                ></rtc-live>
              </no-ssr>
            </template>
          </div>
          <div
            class="image_text_box"
            v-html="chapter_obj.chapterDescription || '暂无学习内容哦~'"
            v-if="chapter_obj.isLive == 3"
          ></div>
          <!-- 录播显示章节列表 -->
          <!-- <div class="chapter-box" v-if="chapter_obj.isLive == 0">
            <chapter-tree
              :datas="chapter_tree"
              :current="chapter_obj"
              :isBuy="is_had_course"
            ></chapter-tree>
          </div> -->
          <!-- 直播显示聊天互动 -->
          <div
            class="chapter-box"
            style="padding:0"
            v-if="chapter_obj.isLive == 1 || chapter_obj.isLive == 2"
          >
            <GroupChat
              :chapter_obj="chapter_obj"
              :teacher_obj="teacher_obj"
              :live_status="live_status"
            ></GroupChat>
          </div>
        </div>
      </no-ssr>
      <!-- 主体详情 -->
      <div
        class="body-position"
        :class="chapter_obj.isLive == 1 ? 'active' : ''"
      >
        <!-- 详情 -->
        <div class="left-detail">
          <Tabs :value="leftDetail">
            <TabPane
              label="学习内容"
              name="study-content"
              v-if="chapter_obj.isLive != 3"
            >
              <div
                v-html="chapter_obj.chapterDescription || '暂无学习内容哦~'"
              ></div>
            </TabPane>
            <TabPane label="学习课件" name="study-courseware">
              <div
                class="courseware-list"
                v-if="
                  chapter_obj.courseWarePath &&
                    chapter_obj.courseWarePath != 'null'
                "
              >
                <div class="courseware-name">
                  <Icon type="md-document" size="20" /><span
                    style="margin-left:14px;"
                    >学习课件</span
                  >
                </div>
                <!-- <span>{{chapter_obj.courseWarePath}}</span> -->
                <a
                  :href="chapter_obj.courseWarePath"
                  :download="chapter_obj.name"
                >
                  <Icon type="md-download" class="download-btn" size="20" />
                </a>
              </div>
            <!--  <iframe
                :src="
                  `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
                    chapter_obj.courseWarePath
                  )}`
                "
                v-if="isMircosoftRead"
                class="preview-iframe"
                frameborder="0"
                style="min-height: 580px;width: 100%;"
              >
                This is an embedded
                <a target="_blank" href="http://office.com">Microsoft Office</a>
                document, powered by
                <a target="_blank" href="http://office.com/webapps"
                  >Office Online</a
                >
              </iframe> -->
              <!-- <img
                class="preview-img"
                :src="chapter_obj.courseWarePath"
                v-if="
                  /.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(
                    chapter_obj.courseWarePath
                  )
                "
              /> -->
            </TabPane>
            <!-- <TabPane label="课程签到" name="course-signin" v-if="kl_md.KLKCQD == 1 && is_had_course">
              <div class="signin_btn" @click="courseSignInHandle()">
                <span v-if="maySignInCourse">签 到</span>
                <span v-else-if="hasSignInCourse">已签到</span>
                <span v-else>{{countDownSecond}}</span>
              </div>
            </TabPane> -->
            <TabPane
              label="课程作业"
              name="course-task"
              v-if="kl_md.KLZYGL == 1 && is_had_course"
            >
              <div class="course_task_list">
                <div
                  class="task_item"
                  v-for="(item, index) in videoTaskList"
                  :key="index"
                >
                  <p class="task_name">
                    <span style="color: #707780;"
                      >课程作业{{ index + 1 }}-</span
                    >
                    《<span style="color: #43474c;">{{ item.videoName }}</span
                    >》
                    <span style="color: var(--theme-color);">{{
                      item.taskName
                    }}</span>
                  </p>
                  <div class="task_btn_list">
                    <div
                      class="task_btn_item"
                      v-if="item.resourceUrl"
                      @click="downloadExport(item.resourceUrl, item.taskName)"
                    >
                      下载资源
                    </div>
                    <Upload
                      action="#"
                      :before-upload="handleUploadTask"
                      :show-upload-list="false"
                      v-if="item.taskType == 2"
                    >
                      <div
                        :class="[
                          'task_btn_item',
                          item.userTask ? 'task_btn_gray' : 'task_btn_pink'
                        ]"
                        @click="setTask(item, !!item.userTask, $event)"
                      >
                        {{ item.userTask ? "已经完成" : "上传作业" }}
                      </div>
                    </Upload>
                    <div
                      v-else
                      :class="[
                        'task_btn_item',
                        item.userTask ? 'task_btn_gray' : 'task_btn_pink'
                      ]"
                      @click="setTask(item, !!item.userTask, $event)"
                    >
                      {{ item.userTask ? "已经完成" : "开始考试" }}
                    </div>
                  </div>
                </div>
              </div>
            </TabPane>
          </Tabs>
          <div class="signin-module" @click="courseSignInHandle()">
            <span v-if="maySignInCourse">马上签到</span>
            <span v-else-if="hasSignInCourse">已经签到</span>
            <span v-else>签到倒计时：{{ countDownSecond }}</span>
          </div>
        </div>
        <div class="right-mentor" v-if="chapter_obj.isLive == 1">
          <span>{{ $t("locale.pc.mycourse.play.t12") }}:</span>
          <div class="mentor-mess">
            <div class="portrait">
              <img :src="teacher_obj.avatar" />
            </div>
            <div class="abstract">
              <ul>
                <li class="m1">
                  <p>{{ teacher_obj.acName }}</p>
                  {{ $t("locale.pc.mycourse.coursedetail.t23") }}
                </li>
                <li class="m3" style="line-height:32px;">
                  <span v-if="teacher_obj.designation">{{
                    teacher_obj.designation
                  }}</span>
                  <span v-else>暂无教师个人简介</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="teacher_introduce">
            <span v-if="teacher_obj.ftIntroduce">{{
              teacher_obj.ftIntroduce
            }}</span>
            <span v-else>暂无教师个人简介</span>
          </div>
        </div>
      </div>
    </div>
    <div
      class="chapter-content"
      :class="[showChapter ? '' : 'active']"
      v-if="chapter_obj.isLive == 0"
    >
      <div class="course-btn" @click="openChapter">
        收回课程表<Icon
          class="right-icon"
          type="ios-arrow-forward"
          size="20"
          v-bind:style="{ display: showChapter ? 'block' : 'none' }"
        /><Icon
          class="right-icon"
          type="ios-arrow-back"
          size="20"
          v-bind:style="{ display: showChapter ? 'none' : 'block' }"
        />
      </div>
      <div class="chapter-header">
        <div class="course-name">课程《{{ course_obj.courseName }}》</div>
      </div>
      <div class="chapter-center">
        <div
          class="chapter-list"
          v-for="(item, index) in chapter_tree"
          :key="index"
        >
          <div
            class="chapter-tree-title"
            :class="[
              coursePlay == item.id || chapterFather == item.id
                ? 'chapter-tree-title-selected'
                : '',
              courseChapterItem == item.id ? 'chapter-tree-title-active' : ''
            ]"
            @click="chapterTreeHandle(item)"
          >
            <Tag
              class="tag-chapter"
              color="success"
              v-if="item.isDone && item.children.length == 0"
              >已完成</Tag
            ><Tag
              class="tag-chapter"
              color="warning"
              v-if="!item.isDone && item.children.length == 0"
              >未完成</Tag
            >

            <span class="ellipsis">{{ item.chapterName }}</span
            ><span
              class="jump"
              v-if="
                kl_md.KLST == 1 &&
                  item.isJump == 1 &&
                  Object.keys(user_info).length != 0
              "
              >试看</span
            ><Icon
              class="right-icon"
              v-if="item.children.length > 0"
              type="ios-arrow-down"
              size="22"
              v-bind:style="{
                display:
                  coursePlay == item.id || chapterFather == item.id
                    ? 'block'
                    : 'none'
              }"
            /><Icon
              class="right-icon"
              v-if="item.children.length > 0"
              type="ios-arrow-forward"
              size="22"
              v-bind:style="{
                display:
                  coursePlay == item.id || chapterFather == item.id
                    ? 'none'
                    : 'block'
              }"
            />
          </div>
          <ul
            class="chapter-tree-children"
            v-if="item.children.length > 0"
            :class="[
              coursePlay == item.id || chapterFather == item.id
                ? 'chapter-tree-children-active'
                : ''
            ]"
          >
            <li v-for="(val, i) in item.children" :key="i">
              <div
                class="chapter-tree-title"
                :class="[
                  coursePlay == val.id ? 'chapter-tree-title-selected' : '',
                  courseChapterItem == val.id ? 'chapter-tree-title-active' : ''
                ]"
                @click="chapterTreeHandle(val)"
              >
                <Tag
                  class="tag-chapter"
                  color="success"
                  v-if="val.isDone && val.children.length == 0"
                  >已完成</Tag
                ><Tag
                  class="tag-chapter"
                  color="warning"
                  v-if="!val.isDone && val.children.length == 0"
                  >未完成</Tag
                >
                <span
                  class="ellipsis"
                  :class="[
                    kl_md.KLST == 1 &&
                    val.isJump == 1 &&
                    Object.keys(user_info).length != 0
                      ? 'active'
                      : ''
                  ]"
                  >&nbsp;&nbsp;{{ val.chapterName }}</span
                >
                <span
                  class="jump"
                  v-if="
                    kl_md.KLST == 1 &&
                      val.isJump == 1 &&
                      Object.keys(user_info).length != 0
                  "
                  >试看</span
                ><Icon
                  class="right-icon"
                  v-if="val.children.length > 0"
                  type="ios-arrow-down"
                  size="22"
                  v-bind:style="{
                    display: coursePlay == val.id ? 'block' : 'none'
                  }"
                /><Icon
                  class="right-icon"
                  v-if="val.children.length > 0"
                  type="ios-arrow-forward"
                  size="22"
                  v-bind:style="{
                    display: coursePlay == val.id ? 'none' : 'block'
                  }"
                />
              </div>
              <ul
                class="chapter-tree-children"
                v-if="val.children.length > 0"
                :class="[
                  coursePlay == val.id ? 'chapter-tree-children-active' : ''
                ]"
              >
                <li v-for="(three, key) in val.children" :key="key">
                  <div
                    class="chapter-tree-title"
                    :class="[
                      coursePlay == three.id
                        ? 'chapter-tree-title-selected'
                        : '',
                      courseChapterItem == three.id
                        ? 'chapter-tree-title-active'
                        : ''
                    ]"
                    @click="chapterTreeHandle(three)"
                  >
                    <Tag
                      class="tag-chapter"
                      color="success"
                      v-if="three.isDone && three.children.length == 0"
                      >已完成</Tag
                    ><Tag
                      class="tag-chapter"
                      color="warning"
                      v-if="!three.isDone && three.children.length == 0"
                      >未完成</Tag
                    >
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ three.chapterName
                    }}<span
                      class="jump"
                      v-if="
                        kl_md.KLST == 1 &&
                          three.isJump == 1 &&
                          Object.keys(user_info).length != 0
                      "
                      >试看</span
                    >
                  </div>
                </li>
              </ul>
            </li>
            <!-- <li>
              <div class="chapter-tree-title">&nbsp;&nbsp;二级导航</div>
              <ul class="chapter-tree-children">
                <li>
                  <div class="chapter-tree-title">&nbsp;&nbsp;&nbsp;&nbsp;三级导航</div>
                </li>
              </ul>
            </li>
            <li>
              <div class="chapter-tree-title">&nbsp;&nbsp;二级导航</div>
            </li> -->
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCourse, saveCourseSignIn, downloadReport } from "~/api/course";
import { getChapter, getVideoLastTime, getLastStudyList } from "~/api/chapter";
import { getMajorList } from "~/api/major";
import { getTeacher } from "~/api/account/user";
import { getMyTaskList, saveUserTask, getVideoUrl } from "~/api/task";
import { socketUrl } from "~/config/conf";
import ChapterTree from "~/components/pc/ChapterTree";
import GroupChat from "~/components/pc/GroupChat";
import VideosPlayer from "~/components/mobile/VideosPlayer";
import RtcLive from "~/components/pc/TRtcLive";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  components: {
    ChapterTree,
    VideosPlayer,
    GroupChat,
    RtcLive
  },
  // head() {
  //   return {
  //     meta: this.is_set_secure
  //       ? [
  //           {
  //             hid: "http-equiv",
  //             "http-equiv": "Content-Security-Policy",
  //             name: "Content-Security-Policy",
  //             content: "upgrade-insecure-requests"
  //           }
  //         ]
  //       : []
  //   };
  // },
  data() {
    return {
      myTaskList: [],
      taskObj: {},
      countDownSecond: "5:00",
      countDownTimer: null,
      maySignInCourse: false,
      signInCourseFlag: false,
      chapterTitle: "",
      leftDetail: "study-content",
      showChapter: true,
      coursePlay: 0,
      courseChapterItem: 0,
      chapterFather: null,
      active_tap: "detail",
      lastStudyDoneList: [],
      course_obj: {
        name: ""
      },
      teacher_obj: {}, //课程老师信息
      chapter_list: [], //章节列表
      chapter_tree: [], //章节树
      chapter_active: [], //折叠面板打开
      chapter_obj: {
        courseId: 0,
        chapterName: "",
        chapterIndex: 1,
        chapterLevel: 1,
        chapterDescription: "",
        fatherLevelId: 0,
        live: "hahah",
        courseWarePath: null,
        fileName: "",
        filePath: "",
        fileType: null,
        fileSize: null,
        createTime: 1591012869000,
        createUserId: null,
        createUserName: null,
        updateTime: 1591012869000,
        updateUserId: null,
        updateUserName: null,
        liveEndTime: 1591012869000,
        liveStartTime: 1591012869000
      }, //正在播放的章节
      video_obj: {
        time: 0
      }, //视频其他数据
      websock: null,
      major_obj: {
        id: "",
        name: ""
      },
      component: "ChapterTree",
      component1: "ChapterWareTree",
      sources: "",
      is_had_course: false,
      last_require_lime: new Date().getTime(), //上次上报视频时间的时间戳
      timer: null, //节流计时器
      socketFailedCount: 0, //socket重连计数器
      minChapterVedioList: [], //可播放的视频章节ids
      mainWidth: "1200px"
    };
  },
  activated() {
    this.initPage();
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      major_list(state) {
        return state.major_list;
      },
      buy_record_list(state) {
        return state.buy_record_list;
      },
      is_mobile(state) {
        return state.is_mobile;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      },
      kl_md(state) {
        return state.kl_md;
      },
      token(state) {
        return state.token;
      },
      sign_in_course_list(state) {
        return state.sign_in_course_list;
      }
    }),
    hasSignInCourse() {
      return this.sign_in_course_list.findIndex(
        item => item.courseId == this.courseId
      ) != -1
        ? true
        : false;
    },
    width(){
      // if (process.client) {
      //   this.$nextTick(()=>{
      //     if(window.innerWidth > 1500){
      //       return '1200px';
      //     }else{
      //       return '940px';
      //     }
      //   })
      // }else{
      //   return '1200px';
      // }
      if(window && window.innerWidth > 1500){
        return '1200px';
      }else{
        return '940px';
      }
      // window.innerWidth
    },
    bigScreen(){
      if (process.client) {
        if(window && window.innerWidth > 1500){
          return true;
        }else{
          return false;
        }
      }else{
        return false;
      }
      
    },
    // mainWidth(){
    //   this.$nextTick(()=>{
    //     console.log(document);
    //     if(document && document.body){
    //       return ((document.body.scrollWidth -260)-((document.body.scrollWidth -1200)/2))+'px';
    //     }else{
    //       return '1200px';
    //     }
    //   })
    // },
    chapterVedioList() {
      if (this.is_had_course) {
        return this.minChapterVedioList;
      } else {
        return this.minChapterVedioList.filter(item => item.isJump == 1);
      }
    },
    videoTaskList() {
      return this.myTaskList.filter(item => item.videoId == this.chapterId);
    },
    courseId() {
      return this.$route.query.id;
    },
    chapterId() {
      return this.$route.query.chapterId;
    },
    isMircosoftRead() {
      const { courseWarePath } = this.chapter_obj;
      let xls = /^.*\.(?:xls)$/;
      let xlsx = /^.*\.(?:xlsx)$/;
      let docx = /^.*\.(?:docx)$/;
      let doc = /^.*\.(?:doc)$/;
      let ppt = /^.*\.(?:ppt)$/;
      let pptx = /^.*\.(?:pptx)$/;
      if (
        xls.test(courseWarePath) ||
        xlsx.test(courseWarePath) ||
        doc.test(courseWarePath) ||
        docx.test(courseWarePath) ||
        pptx.test(courseWarePath) ||
        ppt.test(courseWarePath)
      ) {
        return true;
      } else {
        return false;
      }
    },
    getCount() {
      let time_far =
        this.course_obj.buyCourseDeadlineDate - new Date().getTime();
      if (time_far > 0) {
        return time_far;
      } else {
        return -1;
      }
    },
    getChapterCount() {
      let time_far = this.chapter_obj.liveStartTime - new Date().getTime();
      if (time_far > 0) {
        return time_far;
      } else {
        return -1;
      }
    },
    is_set_secure() {
      if (process.client) {
        let is_https_resource = /^https/.test(this.chapter_obj.live);
        let is_https_domain = window.location.protocol == "https:";
        //https包含http资源返回true
        if (is_https_domain && !is_https_resource) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    //1.正在直播区间  2.直播还没开始  3.直播结束
    live_status() {
      const { liveEndTime, liveStartTime } = this.chapter_obj;
      let currentTime = new Date().getTime();
      if (liveStartTime <= currentTime && currentTime < liveEndTime) {
        return 1;
      } else if (liveStartTime > currentTime) {
        return 2;
      } else if (liveEndTime < currentTime) {
        return 3;
      }
    }
  },
  watch: {
    $route(new_val, old_val) {
      if (new_val.name == "play" && old_val.name == "play") {
        let chapter_obj = this.chapter_list.filter(
          i => i.id == new_val.query.chapterId
        )[0];
        console.log("chapter_obj", chapter_obj);
        this.$set(this, "chapter_obj", chapter_obj);
        this.toLiveRoom();
        // if (this.chapter_obj.isLive == 1) {
        //   this.sources = this.chapter_obj.live;
        // } else if (this.chapter_obj.isLive == 0) {
        //   this.getVideoLastTime();
        //   this.closeConnection().then(() => {
        //     this.initWebSocket();
        //   });
        //   this.sources = this.chapter_obj.filePath;
        //   this.getVideoLastTime();
        // } else if(this.chapter_obj.isLive == 2){
        //   // 保留阿里云直播,跳转到指定的直播地址
        //   // this.toLiveRoom();
        //   this.chapterTreeHandle(this.chapter_obj);
        // }
      }
    },
    buy_record_list(new_val, old_val) {
      this.set_had_course();
    },
    chapter_obj(new_val, old_val) {
      console.log("章节发生变化 => ", new_val);
      if (new_val.isCustom) {
        window.location.href = new_val.live;
      }
    }
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING", "UPDATE_SIGN_IN_COURSE_LIST"]),
   async toLiveRoom(){
     if ((this.chapter_obj.isLive == 1 || this.chapter_obj.isLive == 2 || this.chapter_obj.isLive == 4) && this.chapter_obj.videoInfo) {
        // console.log(this.chapter_obj); // 直播id
        this.SET_IS_LOADING(true);
        let result = await getVideoUrl(this.chapter_obj.videoInfo.id);
        if (result && result.data && result.data.code == 200) {
          let newTab = window.open("_blank");
          newTab.location.href = result.data.data.liveUrl;
          this.$router.back();
        } else if (result && result.data && result.data.code == 1001) {
          this.$Message.error(result.data.msg);
        } else {
          this.$Message.error("数据请求失败");
        }
        // 拦截加载项和阻止函数
        this.SET_IS_LOADING(false);
        return;
      }else{
        if (this.chapter_obj.isLive == 1) {
          this.sources = this.chapter_obj.live;
        } else if (this.chapter_obj.isLive == 0) {
          this.getVideoLastTime();
          this.closeConnection().then(() => {
            this.initWebSocket();
          });
          this.sources = this.chapter_obj.filePath;
          this.getVideoLastTime();
        }
      }
   },
    //上传我的作业
    async handleUploadTask(file) {
      console.log(file);
      this.SET_IS_LOADING(true);
      let params = {
        file: file,
        userId: this.user_info.id,
        taskId: this.taskObj.id
      };
      let fd = new FormData();
      Object.keys(params).forEach(i => {
        if (params[i] || params[i] === 0) {
          fd.append(i, params[i]);
        }
      });
      let result = await saveUserTask(fd);
      if (result && result.data && result.data.code == 200) {
        this.$Message.success("上传作业成功！");
        this.getMyTask();
        this.SET_IS_LOADING(false);
      } else if (result && result.data && result.data.code == 1001) {
        this.$Message.warning(result.data.msg);
        this.SET_IS_LOADING(false);
      } else {
        this.$Message.error("上传作业失败！");
        this.SET_IS_LOADING(false);
      }
      return false;
    },
    //设置我的作业报告的数据
    setTask(obj, status, event) {
      if (status) {
        event.stopPropagation();
        return;
      }
      if (obj && obj.taskType == 2) {
        this.taskObj = obj;
      } else {
        console.log("跳转");
        this.$router.push("/task-paper?taskId=" + obj.id);
      }
    },
    async downloadExport(url, reportName) {
      this.SET_IS_LOADING(true);

      let result = await downloadReport(url);
      const content = result.data;
      const blob = new Blob([content]);
      let fileName = reportName + "." + url.replace(/(.*\.)/, ""); // 自定义文件名+后缀;
      if ("download" in document.createElement("a")) {
        console.log("非IE下载");
        // 非IE下载
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      } else {
        // IE10+下载
        console.log("IE10+下载");
        navigator.msSaveBlob(content, fileName);
      }
      this.SET_IS_LOADING(false);
    },
    //获取我的作业
    async getMyTask() {
      this.SET_IS_LOADING(true);
      let params = {
        courseId: this.courseId
      };
      let result = await getMyTaskList(params);
      if (result && result.data && result.data.code == 200) {
        this.myTaskList = result.data.data.rows.map(item => {
          return {
            ...item,
            videoHierarchy: item.videoHierarchy
              ? JSON.parse(item.videoHierarchy)
              : []
          };
        });
      } else {
        this.$Message.error(this.$t("locale.pc.classroom.t43"));
      }
      this.SET_IS_LOADING(false);
    },
    async courseSignInHandle() {
      if (this.maySignInCourse && !this.signInCourseFlag) {
        this.signInCourseFlag = true;
        this.SET_IS_LOADING(true);
        let result = await saveCourseSignIn({
          courseId: this.courseId
          // userId:this.user_info.id
        });
        if (result && result.data && result.data.code == 200) {
          this.$Message.success("签到成功");
          this.UPDATE_SIGN_IN_COURSE_LIST(result.data.data);
          this.maySignInCourse = false;
          this.signInCourseFlag = false;
        } else {
          this.$Message.error("服务不可用");
        }
        this.SET_IS_LOADING(false);
      } else {
        return false;
      }
    },
    // 签到倒计时
    countDown() {
      if (this.countDownTimer) {
        clearInterval(this.countDownTimer);
        this.countDownTimer = null;
      }
      let signInCourseIndex = this.sign_in_course_list.findIndex(item => {
        return item.courseId == this.courseId;
      });
      if (signInCourseIndex != -1) {
        this.maySignInCourse = false;
        return;
      }
      let timeSecond = 5 * 60;
      this.countDownTimer = setInterval(() => {
        if (this.hasSignInCourse) {
          clearInterval(this.countDownTimer);
          this.countDownTimer = null;
          return;
        }
        timeSecond--;
        if (timeSecond <= 0) {
          this.maySignInCourse = true;
          clearInterval(this.countDownTimer);
          return;
        }
        let m =
          Math.floor(timeSecond / 60) < 10
            ? "0" + Math.floor(timeSecond / 60)
            : Math.floor(timeSecond / 60);
        let s =
          Math.floor(timeSecond % 60) < 10
            ? "0" + Math.floor(timeSecond % 60)
            : Math.floor(timeSecond % 60);
        this.countDownSecond = "00:" + m + ":" + s;
      }, 1000);
    },
    // 查找可以播放的视频章节列表
    findMinVedioChapter(vedioArr) {
      vedioArr.map(item => {
        if (item.children.length > 0) {
          this.findMinVedioChapter(item.children);
        } else {
          this.minChapterVedioList.push(item);
        }
      });
    },
    async chapterTreeHandle(chapter) {
      // console.log(chapter);
      // return;
      // 保留阿里云直播,跳转到指定的直播地址
      if ((chapter.isLive == 1 || chapter.isLive == 2 || chapter.isLive == 4) && chapter.videoInfo) {
        // console.log(item); // 直播id
        // 配置加载项
        this.SET_IS_LOADING(true);
        let result = await getVideoUrl(chapter.videoInfo.id);
        // console.log(data);
        if (result && result.data && result.data.code == 200) {
          let newTab = window.open("_blank");
          newTab.location.href = result.data.data.liveUrl;
        } else if (result && result.data && result.data.code == 1001) {
          this.$Message.error(result.data.msg);
        } else {
          this.$Message.error("数据请求失败");
        }
        // 拦截加载项和阻止函数
        this.SET_IS_LOADING(false);
        return;
      }
      // if(this.coursePlay == chapter.id && this.chapterFather == null){
      //   // this.chapterFather = null;
      //   this.coursePlay = null;
      //   return false;
      //   console.log("进来了呢")
      // }
      // if(this.chapterFather == chapter.id){
      //   this.chapterFather = null;
      //   this.coursePlay = null;
      //   return false;
      // }
      if (chapter.fatherLevelId != 0 && chapter.chapterLevel == 2) {
        this.chapterFather = chapter.fatherLevelId;
        // return false;
      } else if (chapter.chapterLevel == 3) {
        // this.chapterFather = null;
        // return false;
        // this.coursePlay = null;
      } else {
        this.chapterFather = null;
      }
      if (chapter.children.length > 0) {
        console.log("有子章节", chapter);
        if (this.coursePlay === chapter.id) {
          this.coursePlay = null;
        } else {
          this.coursePlay = chapter.id;
        }
        this.courseChapterItem = null;
      } else {
        if (chapter.chapterLevel === 1) {
          this.coursePlay = null;
        }
        this.courseChapterItem = chapter.id;
        this.pushRouter(chapter);
        console.log("没有子章节", chapter);
      }
    },
    courseChapterItemHandle(id, item) {
      this.courseChapterItem = id;
      console.log("章节", item);
      this.pushRouter(item);
      // this.chapterTitle = item.chapterName;
    },
    showChapterList(index, chapter) {
      console.log("一级章节", chapter);
      if (chapter.children.length > 0) {
        if (this.coursePlay === index) {
          this.coursePlay = null;
        } else {
          this.coursePlay = index;
        }
      } else {
        this.courseChapterItemHandle(chapter.id, chapter);
      }
    },
    openChapter() {
      this.showChapter = !this.showChapter;
    },
    pushRouter(item) {
      // console.log("章节跳转=====",item)
      if (Object.keys(this.user_info).length == 0) {
        return this.$router.replace("/coursedetail?id=" + item.courseId);
      }
      if (!this.is_had_course && !item.isJump) {
        return this.$router.replace("/coursedetail?id=" + item.courseId);
      }
      if (!this.is_had_course && item.isJump) {
        this.$router.replace({
          path: "/play",
          query: {
            id: this.courseId,
            chapterId: item.id
          }
        });
        return;
      }
      if (this.$route.name == "/play") {
        if (item.children && item.children.length > 0) {
          return;
        }
        this.$router.replace({
          path: "",
          query: {
            id: this.courseId,
            chapterId: item.id
          }
        });
      } else {
        if (item.children && item.children.length > 0) {
          return;
        }
        this.$router.replace({
          path: "/play",
          query: {
            id: this.courseId,
            chapterId: item.id
          }
        });
      }
    },
    async getData() {
      return new Promise(async (res, rej) => {
        this.SET_IS_LOADING(true);
        let result = await getCourse({
          id: this.courseId
        });
        if (result && result.data && result.data.code == 200) {
          const { data } = result.data;
          if (data && data.rows && data.rows.length > 0) {
            this.course_obj = data.rows[0];
            this.getTeacherFun();
            this.getMajorFun();
            // this.getLastStudyList();
          }
        } else {
          this.$Message.error(
            this.$t("locale.pc.mycourse.play.t14") + result &&
              result.data &&
              result.data.msg
          );
        }
        this.SET_IS_LOADING(false);
        res();
      }).then();
    },
    set_had_course() {
      this.coursePlay = this.chapter_obj.fatherLevelId;

      // console.log(this.chapter_obj,"章节=====")
      let res = this.buy_record_list.filter(i => i.courseId == this.courseId);
      if (res.length > 0) {
        this.is_had_course = true;
      } else {
        this.is_had_course = false;
      }
      if (this.is_had_course) {
        console.log("拥有课程");
        this.courseChapterItem = this.chapter_obj.id;
        console.log("courseChapterItem", this.courseChapterItem);
        if (this.chapter_obj.isLive == 0) {
          console.log("初始化socket");
          this.initWebSocket();
        }
      } else if (this.chapter_obj.isJump == 1) {
        if (this.chapter_obj.isLive == 0) {
          console.log("初始化socket");
          this.initWebSocket();
        }
      } else {
        this.$router.replace("/coursedetail?id=" + this.courseId);
      }
    },
    setSources(url) {
      this.sources = url;
    },
    arrToTree(trimChapterList) {
      let _LEVEL_OBJECT = {};
      //找出最深的层数
      let _MAX_ = trimChapterList.reduce((accumulator, currentValue) => {
        if (accumulator.chapterLevel > currentValue.chapterLevel) {
          return accumulator;
        } else {
          return currentValue;
        }
      }).chapterLevel;
      if (!_MAX_) {
        return trimChapterList;
      }
      for (let i = 1; i < _MAX_ + 1; i++) {
        _LEVEL_OBJECT = {
          ..._LEVEL_OBJECT,
          [i]: trimChapterList
            .map((item, index) => {
              if (item.chapterLevel == i) {
                return item;
              }
            })
            .filter(item => item !== undefined)
        };
      }
      for (let i = _MAX_; i >= 1; i--) {
        if (i < _MAX_) {
          _LEVEL_OBJECT[i] = _LEVEL_OBJECT[i].map((item, index) => {
            return {
              ...item,
              children: _LEVEL_OBJECT[i + 1]
                .map((item2, index2) => {
                  if (item2.fatherLevelId == item.id) {
                    return item2;
                  }
                })
                .filter(item2 => item2 !== undefined)
            };
          });
        }
      }
      return _LEVEL_OBJECT[1];
    },
    async getLastStudyList() {
      this.SET_IS_LOADING(true);
      let result = await getLastStudyList({
        userId: this.user_info.id,
        courseId: this.courseId
      });
      console.log("该课程所有章节的进度", result.data.data.rows);
      if (result && result.data && result.data.code == 200) {
        let arr = result.data.data.rows;
        this.lastStudyDoneList = arr.filter(item => item.isDone == 1);
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$toast(this.$t("locale.pc.mycourse.play.t15"));
      }
    },
    /**
     * 构造树型结构数据
     * @param {*} data 数据源
     * @param {*} id id字段 默认 'id'
     * @param {*} parentId 父节点字段 默认 'parentId'
     * @param {*} children 孩子节点字段 默认 'children'
     */
    handleTree(data, id, parentId, children) {
      let config = {
        id: id || "id",
        parentId: parentId || "parentId",
        childrenList: children || "children"
      };

      var childrenListMap = {};
      var nodeIds = {};
      var tree = [];
      for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
          childrenListMap[parentId] = [];
        }
        nodeIds[d[config.id]] = d;
        childrenListMap[parentId].push(d);
      }
      for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
          tree.push(d);
        }
      }
      for (let t of tree) {
        adaptToChildrenList(t);
      }
      function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
          o[config.childrenList] = childrenListMap[o[config.id]]
            ? childrenListMap[o[config.id]]
            : [];
        }
        if (o[config.childrenList]) {
          for (let c of o[config.childrenList]) {
            adaptToChildrenList(c);
          }
        }
      }
      return tree;
    },
    // 排序
    orderList(data) {
      data.map(item => {
        if (item.children && item.children.length > 0) {
          return this.orderList(item.children);
        } else {
          return item;
        }
      });
      return data.sort((a, b) => {
        return b.orderNumber - a.orderNumber;
      });
    },
    async getChapterList() {
      return new Promise(async (res, rej) => {
        this.SET_IS_LOADING(true);
        let result = await getChapter({
          courseId: this.courseId
        });
        if (result && result.data && result.data.code == 200) {
          const { data } = result.data;
          if (data && data.rows && data.rows.length > 0) {
            // this.chapter_list = data.rows;

            //学习进度显示
            await this.getLastStudyList();
            console.log("-c-c-c---c-c--c--c-c", this.lastStudyDoneList);
            let videoDoneArr = data.rows.map(item => {
              return this.lastStudyDoneList.filter(
                items => items.vedioId == item.id
              ).length > 0
                ? { ...item, isDone: 1 }
                : { ...item };
            });
            console.log("-c-c-c---c-c--c--c-c", videoDoneArr);
            this.chapter_list = videoDoneArr;

            let trimChapterList = [];
            trimChapterList = this.chapter_list.map(i => {
              return {
                ...i,
                children: [],
                title: i.chapterName,
                expand: true
              };
            });
            console.log("第一步", trimChapterList);
            // this.chapter_tree = this.arrToTree(trimChapterList);
            this.chapter_tree = this.orderList(
              this.handleTree(trimChapterList, "id", "fatherLevelId")
            );

            this.findMinVedioChapter(this.chapter_tree);

            console.log("第二步章节树", this.chapter_tree);
            this.chapter_active = this.chapter_list.map(i => i.id);
            console.log("第三步所有章节id", this.chapter_active);
            let chapter_arr = this.chapter_list.filter(
              i => i.id == this.chapterId
            );
            console.log("第四步当前播放的章节", chapter_arr);
            if (chapter_arr.length > 0) {
              this.$set(this, "chapter_obj", chapter_arr[0]);
              if (this.chapter_obj.isLive == 3) {
                this.leftDetail = "study-courseware";
              }
              if (this.chapter_obj.isLive == 1) {
                this.sources = this.chapter_obj.live;
              } else {
                this.sources = this.chapter_obj.filePath;
              }
            } else {
              let Deepest_chapter;
              const getChapterObj = arr => {
                if (
                  !Object.keys(arr[0]).includes("children") ||
                  arr[0].children.length === 0
                ) {
                  console.log(arr[0]);
                  Deepest_chapter = arr[0];
                  return;
                } else {
                  getChapterObj(arr[0].children);
                }
              };
              getChapterObj(this.chapter_tree);
              this.$set(this, "chapter_obj", Deepest_chapter);
              if (this.is_mobile) {
                this.$router.replace({
                  path: "/m/course-detail",
                  query: {
                    id: this.courseId,
                    chapterId: this.chapter_obj.id
                  }
                });
              } else {
                this.$router.replace({
                  path: "/play",
                  query: {
                    id: this.courseId,
                    chapterId: this.chapter_obj.id
                  }
                });
              }
              if (this.chapter_obj.isLive == 1) {
                this.sources = this.chapter_obj.live;
              } else {
                this.sources = this.chapter_obj.filePath;
              }
            }
          }
        } else {
          this.$Message.error(
            $t("locale.pc.mycourse.play.t15"),
            result && result.data && result.data.msg
          );
        }
        this.SET_IS_LOADING(false);
        res();
      });
    },
    async getVideoLastTime() {
      let params = {
        userId: this.user_info.id,
        courseId: this.course_obj.id,
        vedioId: this.chapter_obj.id
      };
      let result = await getVideoLastTime(params);
      console.log("上次播放：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          if (data.isDone != 1) {
            this.video_obj = { ...data };
          } else {
            this.video_obj = {
              ...data,
              time: 0
            };
          }
        } else {
          this.video_obj = {
            time: 0
          };
        }
      } else {
        this.$toast(
          $t("locale.pc.mycourse.play.t15"),
          result && result.data && result.data.msg
        );
      }
    },
    async getTeacherFun() {
      this.SET_IS_LOADING(true);
      let params = {
        id: Number(this.course_obj.teacher)
      };
      let result = await getTeacher(params);
      console.log(result);
      if (result && result.status == 200 && result.data) {
        this.teacher_obj = result.data;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$toast(this.$t("locale.pc.mycourse.play.t15"));
      }
    },
    async getMajorFun() {
      this.SET_IS_LOADING(true);
      let params = {
        id: Number(this.course_obj.majorId)
      };
      let result = await getMajorList(params);
      console.log(result);
      if (result && result.data && result.data.code == 200) {
        let major_obj =
          result.data.data.rows.length > 0
            ? result.data.data.rows[0]
            : { id: "", name: "" };
        this.major_obj = major_obj;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$toast(this.$t("locale.pc.mycourse.play.t15"));
      }
    },
    async updateLastStudyTime() {
      console.log("视频播放完毕");
      let params = {
        userId: this.user_info.id,
        courseId: this.course_obj.id,
        vedioId: this.chapter_obj.id
      };
      let result = await getVideoLastTime(params);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        console.log("视频播放完毕--请求进度", data);
        let videoDoneArr = this.chapter_list.map(item => {
          return item.id === data.vedioId && data.isDone === 1
            ? { ...item, isDone: 1 }
            : { ...item };
        });
        this.chapter_list = videoDoneArr;
        let trimChapterList = [];
        trimChapterList = this.chapter_list.map(i => {
          return {
            ...i,
            children: [],
            title: i.chapterName,
            expand: true
          };
        });
        // this.chapter_tree = this.arrToTree(trimChapterList);
        this.chapter_tree = this.orderList(
          this.handleTree(trimChapterList, "id", "fatherLevelId")
        );
        // 自动切换下一章节
        let nextVedioIndex = this.chapterVedioList.findIndex(item => {
          return item.id == data.vedioId;
        });
        if (
          nextVedioIndex != -1 &&
          this.minChapterVedioList.length != nextVedioIndex + 1
        ) {
          // console.log("下一章节",nextVedioIndex + 1);
          // console.log("下一章节对象",this.minChapterVedioList[nextVedioIndex + 1]);
          let nextChapter = this.minChapterVedioList[nextVedioIndex + 1];
          this.chapterTreeHandle(nextChapter);
        }
      } else {
        this.$toast(
          $t("locale.pc.mycourse.play.t15"),
          result && result.data && result.data.msg
        );
      }
      // console.log("-c-c-c---c-c--c--c-c",this.lastStudyDoneList);
      // let videoDoneArr = this.chapter_list.map(item=>{return item.id === data.vedioId &&  data.isDone === 1 ? {...item,isDone:1}:{...item}})
      // console.log("-c-c-c---c-c--c--c-c",videoDoneArr);
      // this.chapter_list = videoDoneArr;
      // let trimChapterList = [];
      // trimChapterList = this.chapter_list.map(i => {
      //   return {
      //     ...i,
      //     children: [],
      //     title: i.chapterName,
      //     expand: true
      //   };
      // });
      // console.log("第一步",trimChapterList);
      // this.chapter_tree = this.arrToTree(trimChapterList);
    },
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        return `${_date.getFullYear()}-${_date.getMonth() +
          1}-${_date.getDate()}`;
      } else {
        return this.this.$t("locale.pc.mycourse.play.unknow");
      }
    },
    initWebSocket() {
      if (process.client) {
        if ("WebSocket" in window) {
          //初始化weosocket
          const wsuri = socketUrl + "video/" + this.user_info.id;
          this.websock = new WebSocket(wsuri);
          this.websock.onmessage = this.websocketonmessage;
          this.websock.onopen = this.websocketonopen;
          this.websock.onerror = this.websocketonerror;
          this.websock.onclose = this.websocketclose;

          window.addEventListener("beforeunload", this.closeConnection, false);
        } else {
          this.$toast(this.$t("locale.pc.mycourse.play.t16"));
        }
      }
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      console.log("成功建立socket连接");
      clearTimeout(this.timer);
      this.timer = null;
      this.socketFailedCount = 0;
      // this.websocketsend("hello hello!");
    },
    websocketonerror() {
      //连接建立失败重连
      console.log("socket连接失败！");
      this.retryConnectSocket();
    },
    websocketonmessage(e) {
      //数据接收
      console.log("收到socket:", e);
      try {
      } catch (e) {
        console.log(e);
      }
    },
    websocketsend(time) {
      //数据发送
      let current_timestamp = new Date().getTime();
      //每隔30秒向服务器提交一次视频观看的进度时间
      let duration = document.querySelector("#videoPlayer > video")
        ? document.querySelector("#videoPlayer > video").duration
        : 0;
      let ratio = time / duration;
      if (duration > 10 * 60) {
        if (duration - time <= 30) {
          //完成
          let data = JSON.stringify({
            type: "lastStudy",
            data: {
              userId: this.user_info.id,
              courseId: this.course_obj.id,
              vedioId: this.chapter_obj.id,
              videoDuration: duration,
              time
            }
          });
          this.websock && this.websock.send(data);
        }
      } else {
        if (time / duration >= 0.95) {
          //完成
          let data = JSON.stringify({
            type: "lastStudy",
            data: {
              userId: this.user_info.id,
              courseId: this.course_obj.id,
              vedioId: this.chapter_obj.id,
              videoDuration: duration,
              time
            }
          });
          this.websock && this.websock.send(data);
        }
      }
      if (current_timestamp - this.last_require_lime > 30 * 1000) {
        console.log("currentTime:", time);
        // console.log("e:", e);
        let data = JSON.stringify({
          type: "lastStudy",
          data: {
            userId: this.user_info.id,
            courseId: this.course_obj.id,
            vedioId: this.chapter_obj.id,
            videoDuration: duration,
            time
          }
        });
        this.websock && this.websock.send(data);
        this.last_require_lime = current_timestamp;
      } else {
        return;
      }
    },
    async websocketclose(e) {
      //关闭
      console.log("断开连接", e);
      this.retryConnectSocket();
    },
    closeConnection() {
      return new Promise((res, rej) => {
        try {
          window.removeEventListener("beforeunload", this.closeConnection);
          this.websock && this.websock.close();

          if (this.timer) {
            clearTimeout(this.timer);
            this.timer = null;
            this.socketFailedCount = 0;
          }
        } catch (e) {
          console.log("关闭socket错误：", e);
        }
        res();
      }).then();
    },
    retryConnectSocket() {
      this.debounce(async () => {
        if (this.socketFailedCount < 10) {
          this.socketFailedCount = this.socketFailedCount + 1;
          await this.closeConnection();
          this.initWebSocket();
        } else {
          console.info("websocket fail to connection , please retry later!");
          this.timer = null;
        }
      }, 3000);
    },
    debounce(fn, wait) {
      return !(() => {
        if (this.timer !== null) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(fn, wait);
      })();
    },
    initState() {
      this.chapterTitle = "";
      this.leftDetail = "study-content";
      this.showChapter = true;
      this.coursePlay = 0;
      this.courseChapterItem = 0;
      this.chapterFather = null;
      this.active_tap = "detail";
      this.lastStudyDoneList = [];
      this.course_obj = {
        name: ""
      };
      this.teacher_obj = {}; //课程老师信息
      this.chapter_list = []; //章节列表
      this.chapter_tree = []; //章节树
      this.chapter_active = []; //折叠面板打开
      this.chapter_obj = {
        courseId: 0,
        chapterName: "",
        chapterIndex: 1,
        chapterLevel: 1,
        chapterDescription: "",
        fatherLevelId: 0,
        live: "hahah",
        courseWarePath: null,
        fileName: "",
        filePath: "",
        fileType: null,
        fileSize: null,
        createTime: 1591012869000,
        createUserId: null,
        createUserName: null,
        updateTime: 1591012869000,
        updateUserId: null,
        updateUserName: null,
        liveEndTime: 1591012869000,
        liveStartTime: 1591012869000
      }; //正在播放的章节
      this.video_obj = {
        time: 0
      }; //视频其他数据
      this.websock = null;
      this.major_obj = {
        id: "",
        name: ""
      };
      this.component = "ChapterTree";
      this.component1 = "ChapterWareTree";
      this.sources = "";
      this.is_had_course = false;
      this.last_require_lime = new Date().getTime(); //上次上报视频时间的时间戳
      this.timer = null;
      this.socketFailedCount = 0;
    },
    initPage() {
      this.getData();
      this.getChapterList().then(() => {
        this.getVideoLastTime();
        this.set_had_course();
      });
      this.countDown();
      if (this.token && Object.keys(this.user_info).length > 0) {
        this.getMyTask();
      }
    }
  },
  created() {
    this.initPage();
    this.courseChapterItem = this.$route.query.chapterId;
    // console.log('courseChapterItem',this.courseChapterItem)
    console.log("========----------", this.chapter_obj);
  },
  mounted() {
    this.$nextTick(() => {
      console.log(document);
      if (document && document.body) {
        this.mainWidth =
          document.body.scrollWidth -
          260 -
          (document.body.scrollWidth - 1200) / 2 +
          "px";
      } else {
        this.mainWidth = "1200px";
      }
    });
  },
  destroyed() {
    this.closeConnection();
    this.initState();
  },
  deactivated() {
    this.closeConnection();
    this.initState();
  }
};
</script>

<style lang="scss">
.chapter-tree-title {
  padding: 10px 20px;
  box-sizing: border-box;
  // max-width: 80%;
  display: flex;
  // flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 22px;
  color: #43474d;
  cursor: pointer;
  // flex-wrap: nowrap;
  // height: 44px;
  // width: 100%;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
  position: relative;
  .tag-chapter {
    position: absolute;
    right: 0;
    top: 0;
    top: 19%;
  }
  .jump {
    font-size: 12px;
    color: #ff8a8a;
    padding: 0 4px;
    // margin-left: 20px;
    // border: 1px solid #ff8a8a;
    // position: absolute;
    // left: 0;
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // width: 84%;
    width: 68%;
  }
  // .ellipsis.active {
  //   width: 74%;
  // }
}
.chapter-tree-title.chapter-tree-title-selected {
  color: var(--theme-color);
}
.chapter-tree-title.chapter-tree-title-active {
  background-color: var(--theme-color);
  color: #ffffff;
}
.chapter-tree-children {
  display: none;
  transition: display 0.3s;
  // li{
  //   cursor: pointer;
  //   box-sizing: border-box;
  //   width: 100%;
  //   height: 44px;
  //   line-height: 24px;

  //   overflow: hidden;
  //   text-overflow: ellipsis;
  //   white-space: nowrap;
  //   font-size: 14px;
  //   font-weight: bold;
  //   color: #707780;
  // }
}
.chapter-tree-children-active {
  display: block;
}
.page-play {
  display: flex;
  background-color: #f2f2f2;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  padding-bottom: 20px;
  overflow: hidden;
  justify-content: flex-end;
  .chapter-content.active {
    width: 0;
  }
  .chapter-content {
    position: relative;
    width: 260px;
    min-height: calc(100% - 70px);
    // z-index: 9999999;
    background-color: #ffffff;
    box-shadow: 0px 3px 122px 0px rgba(32, 40, 56, 0.1);
    transition: width 0.5s;
    .chapter-header {
      width: 100%;
      background-color: var(--theme-color);
      font-size: 14px;
      font-weight: bold;
      color: #ffffff;
      box-sizing: border-box;
      padding: 10px 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .course-name {
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .chapter-center {
      width: 100%;
      // height: 440px;
      height: calc(100% - 40px);
      overflow: auto;
      &::-webkit-scrollbar {
        height: 10px;
        width: 3px;
        border-radius: 3px;
        background-color: #fff;
      }
      &::-webkit-scrollbar-button {
        height: 0;
        width: 0;
        display: none;
      }
      &::-webkit-scrollbar-thumb {
        // background-color: hsla(0, 0%, 95.7%, 1);
        background-color: var(--theme-color);
        opacity: 0.6;
      }
      .chapter-list {
        padding: 10px 0px;
        border-bottom: 1px solid #edf0f5;
        .chapter-title {
          padding: 10px 20px;
          box-sizing: border-box;
          // max-width: 80%;
          display: flex;
          // flex-wrap: wrap;
          align-items: center;
          font-size: 14px;
          font-weight: bold;
          line-height: 22px;
          color: #43474d;
          cursor: pointer;
          // display: -webkit-box;
          // -webkit-line-clamp: 2;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // -webkit-box-orient: vertical;
        }
        .chapter-title.active {
          color: var(--theme-color);
        }
        .chapter-title.chapter-item {
          background-color: var(--theme-color);
          color: #ffffff;
        }
        .chapter-play-box {
          display: none;
          transition: display 0.3s;
          li {
            cursor: pointer;
            padding: 10px 20px;
            box-sizing: border-box;
            width: 100%;
            height: 44px;
            line-height: 24px;

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            font-weight: bold;
            color: #707780;
            .jump {
              font-size: 12px;
              color: #ff8a8a;
              padding: 0 4px;
              margin-left: 20px;
              border: 1px solid #ff8a8a;
              // position: absolute;
            }
          }
          li.chapter-item {
            background-color: var(--theme-color);
            color: #ffffff;
          }
        }
        .chapter-play-box.active {
          display: block;
        }
      }
    }
    .course-btn {
      cursor: pointer;
      position: absolute;
      left: -40px;
      top: 50%;
      margin-top: -55px;
      width: 40px;
      height: 110px;
      background-color: var(--theme-color);
      border-radius: 8px 0px 0px 8px;
      font-size: 14px;
      font-weight: bold;
      line-height: 18px;
      color: #ffffff;
      box-sizing: border-box;
      padding: 10px;

      .right-icon {
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .line {
    width: 100%;
    height: 1px;
    background-color: #f2f2f2;
  }
  .page-position {
    width: 940px;
    &.big_screen{
      transform: translateX(130px);
    }
    &.active {
      width: 1200px;
      margin: 0 auto;
    }
    .breadcrumb-box {
      height: 20px;
      display: flex;
      align-items: center;
      padding: 30px 0;
      .breadcrumb-item {
        color: #515a6e;
        font-size: 14px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
        &:hover {
          color: #515a6e;
        }
      }
      .breadcrumb-arrow {
        display: flex;
        align-items: center;
        margin: 0 3px;
        color: #515a6e;
      }
    }
    .top-introduce {
      font-family: Roboto;
      border: 1px solid rgba(255, 255, 255, 0);
      width: 100%;
      height: 361px;
      background-color: #ffffff;
      border-radius: 4px;
      overflow: hidden;
      .img-position {
        float: left;
        width: 350px;
        height: 263px;
        margin: 29px 46px 69px 37px;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .center-content {
        width: 663px;
        float: left;
        margin-top: 39px;
        .t1 {
          width: 591px;
          height: 58px;
          > span {
            font-size: 20px;
            line-height: 29px;
            color: #000000;
            font-family: SourceHanSansSC-bold;
            font-weight: 600;
          }
        }
        .t2 {
          > p {
            height: 21px;
            font-size: 14px;
            font-family: SourceHanSansSC-regular;
            margin-top: 10px;
            > span {
              font-family: SourceHanSansSC;
              font-weight: 700;
              color: rgb(240, 66, 61);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 20px;
              text-decoration: none;
            }
          }
        }
        .t3 {
          line-height: 22px;
          font-weight: 400;
          letter-spacing: 1px;
          > span {
            font-size: 14px;
            font-weight: 700;
            color: rgba(0, 0, 0, 1);
            font-family: SourceHanSansSC;
            display: block;
            margin: 3px 0px;
          }
        }
        .t4 {
          > p {
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: left;
            font-family: SourceHanSansSC-bold;
            margin-top: 3px;
            font-weight: 600;
            width: 480px;
            float: left;
            > span {
              font-family: SourceHanSansSC;
              font-weight: 400;
              font-size: 14px;
              color: rgb(16, 16, 16);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 20px;
              text-decoration: none;
            }
          }
        }
        .submit {
          .ivu-btn {
            float: right;
            width: 123px;
            height: 40px;
            border: 1px solid rgba(187, 187, 187, 1);
            background-color: var(--theme-color);
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            text-align: center;
            font-family: SourceHanSansSC-bold;
            letter-spacing: 2px;
          }
          > p {
            font-family: SourceHanSansSC;
            font-weight: 700;
            font-size: 24px;
            color: rgb(13, 13, 13);
            > span {
              color: rgb(240, 66, 61);
            }
          }
        }
      }
    }
    .main-box.active {
      .video-container {
        height: 536px;
      }
    }
    .main-box {
      display: flex;
      justify-content: center;
      .video-container {
        width: 850px;
        // height: 536px;
        overflow: hidden;
        .live-info {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          font-size: 14px;
          color: #fff;
          background-color: #000000;
        }
        .chapter-title {
          color: var(--theme-color);
          // height: 70px;
          background-color: #ffffff;
          font-size: 16px;
          font-weight: bold;
          line-height: 22px;
          color: #5b96ff;
          width: 100%;
          box-sizing: border-box;
          padding: 20px;
        }
        .van-count-down {
          color: #fff;
        }
      }
      .image_text_box {
        width: 850px;
        overflow: auto;
        height: 536px;
        background: #ffffff;
        padding: 10px;
        box-sizing: border-box;
      }
      .chapter-box {
        flex: 1;
        background-color: #fff;
        margin-left: 20px;
        padding: 0 12px 0 0;
        border-radius: 4px;
        height: 536px;
        overflow: auto;
        &::-webkit-scrollbar {
          height: 10px;
          width: 3px;
          border-radius: 3px;
          background-color: #fff;
        }
        &::-webkit-scrollbar-button {
          height: 0;
          width: 0;
          display: none;
        }
        &::-webkit-scrollbar-thumb {
          // background-color: hsla(0, 0%, 95.7%, 1);
          background-color: var(--theme-color);
          opacity: 0.6;
        }
      }
    }
    .body-position.active {
      .left-detail {
        margin: 0;
      }
    }
    .body-position {
      width: 100%;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .ivu-tabs-bar {
        padding: 0 40px;
      }
      .left-detail {
        display: block;
        // float: left;
        padding: 20px 0;
        // padding: 20px 20px;
        width: 850px;
        min-height: 500px;
        // height: 100%;
        border-radius: 4px;
        background-color: #ffffff;
        margin: 0 auto;
        position: relative;
        .course_task_list {
          // padding: 48px 0;
          padding: 10px 0;
          .task_item {
            padding: 0 20px;
            // padding: 0 60px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .task_name {
              font-size: 16px;
              letter-spacing: 2px;
              // white-space: nowrap;
              // overflow: hidden;
              // text-overflow: ellipsis;
              font-style: italic;
            }
            .task_btn_list {
              // width: 336px;
              width: 230px;
              display: flex;
              .task_btn_item {
                width: 88px;
                height: 36px;
                font-size: 14px;
                border-radius: 6px;
                border: solid 1px var(--theme-color);
                text-align: center;
                line-height: 36px;
                color: var(--theme-color);
                margin-left: 24px;
                cursor: pointer;
                &.task_btn_gray {
                  border: solid 1px #b3b3b3;
                  color: #b3b3b3;
                }
                &.task_btn_pink {
                  border: solid 1px #ff8a8a;
                  color: #ff8a8a;
                }
              }
            }
          }
        }
        .signin-module {
          position: absolute;
          right: 20px;
          top: 12px;
          height: 34px;
          background-color: var(--theme-color);
          border-radius: 6px;
          font-size: 16px;
          text-align: center;
          color: #ffffff;
          line-height: 34px;
          padding: 0 12px;
          cursor: pointer;
        }
        .signin_btn {
          width: 100px;
          height: 100px;
          margin: 50px auto;
          text-align: center;
          font-size: 20px;
          //  font-weight: bold;
          line-height: 100px;
          background: var(--theme-color);
          color: #ffffff;
          border-radius: 50%;
          cursor: pointer;
        }
        .courseware-list {
          height: 40px;
          margin: 10px 0;
          width: 100%;
          border-top: 1px solid rgba(235, 232, 232, 0.5);
          border-bottom: 1px solid rgba(235, 232, 232, 0.5);
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          // font-size: 16px;
          .courseware-name {
            display: flex;
            align-items: center;
          }
          .download-btn:hover {
            cursor: pointer;
            color: #ffffff;
          }
        }
        .courseware-list:hover {
          border-top: 1px solid var(--theme-color);
          border-bottom: 1px solid var(--theme-color);
          // background: rgba($color: var(--theme-color), $alpha: .1);

          // $linkColor:var(--theme-color);
          // background: transparentize(#{$linkColor}, 1);
          background: var(--theme-color);
          color: #ffffff;
          .download-btn {
            color: #ffffff;
          }
        }
      }
      .right-mentor {
        // float: right;
        width: 330px;
        min-height: 500px;
        border-radius: 4px;
        background-color: #ffffff;
        > span {
          display: block;
          margin: 21px 0px 0px 19px;
          font-family: SourceHanSansSC;
          font-weight: 700;
          font-size: 20px;
          color: rgb(16, 16, 16);
          font-style: normal;
          letter-spacing: 1px;
          line-height: 29px;
          text-decoration: none;
        }
        .mentor-mess {
          margin: 26px 21px;
          height: 70px;
          .portrait {
            border: 1px solid rgb(187, 187, 187);
            border-radius: 50px;
            width: 72px;
            height: 72px;
            float: left;
            > img {
              width: 100%;
              height: 100%;
              border-radius: 50px;
              overflow: hidden;
            }
          }
          .abstract {
            width: 195px;
            height: 70px;
            float: right;
            .m1 {
              font-family: SourceHanSansSC;
              font-weight: 400;
              font-size: 14px;
              color: rgb(16, 16, 16);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 20px;
              text-decoration: none;
              margin-top: 2px;
              > p {
                float: left;
                font-weight: 700;
                font-size: 18px;
                color: var(--theme-color);
                letter-spacing: 0px;
                margin-right: 10px;
              }
            }
            .m2 {
              font-family: SourceHanSansSC;
              font-weight: 400;
              font-size: 12px;
              color: rgb(16, 16, 16);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 20px;
              text-decoration: none;
              margin: 6px auto;
            }
            .m3 {
              font-family: SourceHanSansSC;
              font-weight: 400;
              font-size: 12px;
              color: rgb(16, 16, 16);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 20px;
              text-decoration: none;
              > p {
                float: left;
              }
            }
          }
        }
        .teacher_introduce {
          margin: 10px 21px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
